<template>
    <div class=" commodity">
        <div class="find_top">
            <settingheader :titletext="out" :backpage="ao"></settingheader>            
        </div>
        <div class="demo">
            <div class="centre">
                    <h1>最热商品</h1>
                    <p>TOP50</p>
            </div>
            <img src="../../../images/IMG_bianmeixue_02.png" alt="">
        </div>
        

        <div class="main">
            <div class="content">
                <div class="img"><img src="../../../images/IMG_zuireshangping_5.png" alt=""></div>
                    <p class="title">奥迪超实用日常妆</p>
                    <div class="bottom">
                    <div class="mary clearfix"><img src="../../../images/IMG_zuireshangping_cat.png" alt=""><div class="name">Asura</div><span class="advices clearfix"><div class="num">245</div><img src="../../../images/Icon_wpfaqidejindian_talk.png" alt=""></span></div> 
                </div>
            </div>

            <div class="content">
                <div class="img"><img src="../../../images/IMG_zuireshangping_5.png" alt=""></div>
                    <p class="title">奥迪超实用日常妆</p>
                    <div class="bottom">
                        <div class="mary clearfix"><img src="../../../images/IMG_zuireshangping_cat.png" alt=""><div class="name">Asura</div><span class="advices clearfix"><div class="num">245</div><img src="../../../images/Icon_wpfaqidejindian_talk.png" alt=""></span></div> 
                    </div>
                </div>
            </div>

            <div class="title clearfix">
                <div><img src="../../../images/icon_zuireshangping_red.png" alt=""></div>
                <div><h2>LOLI直选</h2></div>
                <div><img src="../../../images/icon_zuireshangping_red.png" alt=""></div>   
            </div>

            <div class="details">
                <div class="img"><img src="../../../images/IMG_zuireshangping_7.png" alt=""></div>
                <div class="content">
                    <p>香奈儿五号香水</p>
                    <p>天猫</p>
                    <p>￥598</p>
                </div>
            </div>

            <div class="details">
                <div class="img"><img src="../../../images/IMG_zuireshangping_7.png" alt=""></div>
                <div class="content">
                    <p>香奈儿五号香水</p>
                    <p>天猫</p>
                    <p>￥598</p>
                </div>
            </div>
    </div>

    
</template>
<script>
import Settingheader from "../../../components/settingheader"
export default {
  name:'Commodity',
  data(){
      return{
        out:"最热商品",
        ao:"/find"
      }
  },
  components:{
      Settingheader
  }
}
</script>
<style lang="less" scoped>
.commodity{
    background:#fff;
}
.find_top{
  width:100%;
  text-align: center;
  height:306/75rem;
  background:#ff406f;
  margin-bottom:240/75rem;
}
.demo{
  position:absolute;
  width:714/75rem;
  height:338/75rem;
  // border:solid 1px black; 
  border-radius:16/75rem;
  box-shadow: 0 0 20px #888888;
  background:#fff;
  top:168/75rem;
  left:0;
  right:0;
  margin: 0 auto;
  overflow:hidden;
 img{
     width: 100%;
 }

}
 .centre{
     position: absolute;
     width: 230/75rem;
     left:0;
     right:0;
     top:0;
     bottom: 0;
     margin: auto auto;
     height: 128/75rem;
     background: #fff;
     text-align: center;

     h1{
         font-size: 30/75rem;
         padding-top: 24/75rem;
         color: #ff406f;
     }
     p{
         font-size: 28/75rem;
         padding-top: 14/75rem;
         color: #ff406f;
     }
     
 }


 .main{
//   position:absolute;
  
  width:714/75rem;
  height:364/75rem;
  // border:solid 1px black; 

//   box-shadow: 5px -5px 50px #888888;
  background:#fff;
  top:168/75rem;
  left:0;
  right:0;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom:38/75rem;
  
  
  .content{
      width:346/75rem;
      height:356/75rem;
      float:left;
      box-shadow: 0 0 20px #888888;      
      overflow:hidden;

      .img{
        border-radius:16/75rem;
        overflow:hidden;
        
          
          img{
              width: 346/75rem;
              height: 270/75rem;
              
          }
      }
  }

  .content:last-child{
      float:right;
      
  }
  .title{
      margin-top:8/75rem;
      margin-left:16/75rem;
      font-size:16/75rem;
      overflow:hidden;
      text-overflow:ellipsis;
  }


  .mary{
      width:100%;
      font-size:16/75rem;
      margin-top:12/75rem;      
      margin-left:16/75rem;    
      float:left;  

      img{
          width:30/75rem;
          height:30/75rem;
          border-radius:6/75rem;
          float:left;
      }

      .name{
          float:left;
          margin-top:10/75rem;
          margin-left:4/75rem;
      }
    
    .advices{
      font-size:18/75rem;
      float:right;
      margin-right:24/75rem;
    }
    .num{
      float:right;
      margin-left:4/75rem;
    }
  }

}
.title{
  width:240/75rem;
  margin:0 auto;


  h2{
  font-size:32/75rem;
  padding:34/75rem 0;
  }

  div{
    float:left;
    padding-right:20px;
  }
}

.details{
    width:714/75rem;
    height:228/75rem;
    margin: 0 auto;
    box-shadow: 0 0 10px #888888;
    position:relative;
    border-radius:6/75rem;    
    margin-bottom:36/75rem;
    

    .img{
        width:178/75rem;
        height:178/75rem;
        position:absolute;
        top:0;
        bottom:0;
        left:20/75rem;
        margin: auto auto ;
        border-radius:6/75rem;
        overflow:hidden;        
    }

    .content{
        width:480/75rem;
        height:228/75rem;
        float:right;
        // background:red;
        p{
            font-size:18/75rem;
            padding-top:28/75rem;
        }
        p:last-child{   
            font-size:20/75rem;
            margin-top:20/75rem;       
        }
    }
    
}
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}
</style>